<template>
	<nav class="breadcrumb">
		<ol>
			<li v-for="(item, index) in items" :key="index" :class="{ active: index === items.length - 1 }">
				<router-link :to="item.to">{{ item.label }}</router-link>
				<span v-if="index !== items.length - 1" class="separator">></span>
			</li>
		</ol>
	</nav>
</template>

<script>
	export default {
		name: 'Breadcrumb',
		props: {
			items: {
				type: Array,
				required: true
			}
		}
	}
</script>

<style scoped>
	.breadcrumb {
		/* 样式设置 */
	}

	.breadcrumb li {
		/* 样式设置 */
		float: left;
		font-size: 14px;
	}

	.breadcrumb li a {
		/* 样式设置 */
		color: #bfbfbf;
	}

	.active a {
		/* 样式设置 */
		color: blue !important;
	}

	.separator {
		/* 样式设置 */
		margin: 0 5px;
		color: #bfbfbf;
	}

	@media (max-width: 768px) {
		.navText {
			display: none;
		}
	}
</style>
